import { Graph, GraphData } from "@antv/g6";

fetch("https://assets.antv.antgroup.com/g6/dagre-combo.json")
  .then((res) => res.json())
  .then((_data) => {
    let data;
    // data = _data;
    data = {
      nodes: [
        { id: "部门预算支付" },

        { id: "一般公共预算" },
        { id: "政府性基金预算" },
        { id: "国有资本经营预算" },

        { id: "财政总指标（本年）" },
        { id: "分配" },
        { id: "财政下达本单位指标" },
        { id: "待分配总指标" },

        { id: '财政总指标（往年）'},
        { id: '分配1'},
        { id: ''},
      ],
      edges: [{ source: "", target: "" }],
    } as GraphData;

    const graph = new Graph({
      container: "demoFlow1",
      background: "#F2F7FA",
      autoFit: "center",
      data,
      node: {
        type: "rect",
        style: {
          size: [12 * 14 + 20, 30],
          iconFontSize: 13,
          radius: 8,
          //   labelText: (d) => d.label as string,
          iconText: (d) => d.label as string,
          labelBackground: true,
          //   ports: [{ placement: "top" }, { placement: "bottom" }],
          ports: [{ placement: "left" }, { placement: "right" }],
        },
        palette: {
          field: (d) => d.combo as any,
        },
      },
      edge: {
        type: "cubic",
        style: {
          endArrow: true,
        },
      },
      combo: {
        type: "rect",
        style: {
          radius: 8,
          labelText: (d) => d.id,
        },
      },
      layout: {
        type: "antv-dagre",
        rankdir: "LR",
        ranksep: 50,
        nodesep: 5,
        sortByCombo: true,
      },
      behaviors: ["drag-element", "drag-canvas", "zoom-canvas"],
    });

    graph.render();
  });

// eslint-disable-next-line import/no-anonymous-default-export
export default function () {
  return <></>;
}
